<template>
  <div id="app">
    <TodoHeader @AddName="handleAdd"></TodoHeader>
    <TodoBody @del="handleDel" :list="list"></TodoBody>
    <TodoFooter @clearAll="handleClear" :list="list"></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoBody from './components/TodoBody.vue'
import TodoFooter from './components/TodoFooter.vue'
// 渲染功能
// 1.提供数据：提供在公共的父组件App.vue
// 2.通过父传子，将数据传给TodoBody
// 3.利用v-for渲染
// 数据添加&删除
// 子传父，删除需要传递id
// 数据统计
// 统计与清除
// 前者父传子，后者子传父
// 自定义指令
// 全局-main.js or 局部-需求组件内
export default {
  data(){
    return{
      list:[
      {id:1, name:'学Vue'},
      {id:2, name:'搞模型'},
      {id:3, name:'吃饭睡觉'},
    ]}
  },
  components:{
    TodoHeader,
    TodoBody,
    TodoFooter
  },
  methods:{
    handleAdd(newName){
      console.log(newName)
      this.list.unshift({
        id: +new Date(),
        name: newName
      })
    },
    handleDel(id){
      console.log(id)
      this.list = this.list.filter(item => item.id !== id)
    },
    handleClear(){
      // console.log('all2')
      this.list = []
    }
  }
}
</script>

<style scoped>
  *{
    box-sizing: border-box;
  }
  #app{
    width: 400px;
    /* height: 600px; */
    text-align: center;
    margin: 0 auto;
  }
  
</style>
